<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h3>跨组件传值</h3>
        <!-- <header-com/> -->
        <header-com></header-com>
        <footer-com></footer-com>
    </div>

    <!-- 头部 -->
    <template id="header">
        <div>
            我是头部组件 -- {{ count }}
            <button @click="sendCount">点我传递</button>
        </div>
    </template>

    <!-- 底部 -->
    <template id="footer">
        <div>
            我是底部组件 -- {{ count }}
        </div>
    </template>

    <script src="./js/vue.js"></script>
    <script>
        // 事件总线
        let bus = new Vue

        // 头部组件
        const HeaderCom = {
            template: "#header",
            data() {
                return {
                    count: 888
                }
            },
            methods: {
                sendCount() {
                    bus.$emit('send', this.count)
                }
            }
        }

         // 底部组件
        const FooterCom = {
            template: "#footer",
            data() {
                return {
                    count: null
                }
            },
            created() {
                bus.$on('send', (val) => {
                    this.count = val
                })
            }
        }
        new Vue({
            el: "#app",
            components: {
                HeaderCom,
                FooterCom
            }
        })
    </script>
</body>
</html>